<template>
  <div>
    <Header></Header>
    <Banner></Banner>
    <div class="main">
      <div class="main-left">
        <li @click="$router.push('/wz')" v-if="this.author == 2">
          <i class="iconfont icon-all-wenzhang"></i>
          我的文章
        </li>
        <li @click="$router.push('/sc')">
          <i class="iconfont icon-all-xiangqu"></i>
          我的关注
        </li>
        <li @click="$router.push('/wd')">
          <i class="iconfont icon-all-wendabangzhu"></i>
          我的问答
        </li>
        <li @click="$router.push('/pl')">
          <i class="iconfont icon-all-pinglun"></i>
          我的评论
        </li>
        <li @click="$router.push('/dy')">
          <i class="iconfont icon-all-yonghuming"></i>
          我的订阅
        </li>
        <li @click="$router.push('/ds')">
          <i class="iconfont icon-all-qian"></i>
          我的打赏
        </li>
        <li @click="$router.push('/tz')">
          <i class="iconfont icon-all-tongzhi"></i>
          通知中心
        </li>
        <li @click="$router.push('/ll')">
          <i class="iconfont icon-all-liulan"></i>
          浏览记录
        </li>
        <li @click="$router.push('/sz')" class="active">
          <i class="iconfont icon-all-icon_setting"></i>
          资料设置
        </li>
      </div>
      <div class="main-right">
        <div class="nav">
          <span @click="wz" v-bind:class="{ active1: isActive1}">资料设置</span>
          <span @click="fb" v-bind:class="{ active2: isActive2}">修改密码</span>
          <span @click="cg" v-bind:class="{ active3: isActive3}">修改图像</span>
        </div>
        <div class="content" v-if="all">
          <div class="means">
            <p>
              <label>昵称</label>
              <input type="text" v-model="username">
            </p>
            <p>
              <label>手机号</label>
              <input type="text" disabled="true" v-model="userPhone">
            </p>

            <p>
              <label>公司</label>
              <input type="text" v-model="company">
            </p>
            <p>
              <label>个人描述</label>
              <textarea name id placeholder="例如：讨教大学产品经理" v-model="text"></textarea>
            </p>
            <p v-if="error" class="box">
              <i class="iconfont icon-all-jinggao-"></i>
              <em>{{defaultCode}}</em>
            </p>
            <div @click="updata">更新资料</div>
          </div>
        </div>
        <div class="content" v-if="relase">
          <div class="means">
            <p>
              <label>原密码</label>
              <input type="text" v-model="old_login_password">
            </p>
            <p>
              <label>新密码</label>
              <input type="password" v-model="new_login_password">
            </p>
            <p>
              <label>确认新密码</label>
              <input type="password" v-model="new2_login_password">
            </p>
            <p v-if="errorpsw" class="box">
              <i class="iconfont icon-all-jinggao-"></i>
              <em>{{defaultCode1}}</em>
            </p>
            <div @click="updataPsw">提交</div>
          </div>
        </div>

        <div class="content" v-if="draft">
          <div class="photo">
            <div class="box">
              <img :src="avatar" alt id="img">
            </div>
            <div class="setting_right" @click.stop="uploadHeadImg">
              <div class="caption">点击上传</div>
            </div>
            <input type="file" accept="image/*" @change="handleFile" class="hiddenInput" ref="file" >
            <div class="sumbit" @click="updata">保存图像</div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/common/Header/Header";
import Footer from "@/common/Footer/Footer";
import Banner from "@/common/Banner/Banner";
import qs from "qs";
export default {
  name: "sz",
  data() {
    return {
      userInfo: {},
      defaultCode: "用户名不能为空",
      defaultCode1: "密码不能为汉字",
      isActive1: true,
      isActive2: false,
      isActive3: false,
      all: true,
      relase: false,
      draft: false,
      shenhe: false,
      username: "",
      userPhone: "",
      text: "",
      company: "",
      error: false,
      avatar: this.getCookie("nm_avatar"),
      old_login_password:'',
      new_login_password:'',
      new2_login_password:'',
      errorpsw :false,
      author:'',
    };
  },
  methods: {
    uploadHeadImg: function() {
      this.$el.querySelector(".hiddenInput").click();
    },
    // 将头像显示
    handleFile: function(e) {
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      var reader = new FileReader();
      // console.log(reader);
      reader.readAsDataURL(file);
      reader.onload = data => {
        let res = data.target || data.srcElement;
        this.avatar = res.result;       
      };  
      
    },
    wz() {
      this.all = true;
      this.relase = false;
      this.draft = false;
      this.isActive1 = true;
      this.isActive2 = false;
      this.isActive3 = false;
    },
    fb() {
      this.all = false;
      this.relase = true;
      this.draft = false;
      this.isActive1 = false;
      this.isActive2 = true;
      this.isActive3 = false;
    },
    cg() {
      this.all = false;
      this.relase = false;
      this.draft = true;
      this.isActive1 = false;
      this.isActive2 = false;
      this.isActive3 = true;
    },
    // 获取用户资料
    getUserlist() {
      let param = {
        member_id: this.getCookie("member_id")
      };
      this.$axios
        .post("/api/App/User/Set/get_edit_info", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          console.log(res);
          this.userInfo = res.data.data;
          this.username = this.userInfo.nickname;
          this.userPhone = this.userInfo.mobile;
        });
    },
    //更新用户资料
    updata() {
      console.log(this.$refs.file.files)
      // console.log(this.avatar)
      console.log(111);
      if (this.username == "") {
        this.error = true;
        return;
      }
      let param = {
        member_id: this.getCookie("member_id"),
        avatar:this.$refs.file.files,
        nickname:this.username,
        description:this.text,
        company:this.company,

      };
      this.$axios
        .post("/api/App/User/Set/save_etit_info", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {
          console.log(res);
          //  this.userInfo = res.data.data
          //  this.username = this.userInfo.nickname;
          //  this.userPhone = this.userInfo.mobile
        });
    },
    //更改图片

    //修改密码
    updataPsw(){
      if(this.pswReg.test(this.old_login_password)|| this.pswReg.test(this.new_login_password) || this.pswReg.test(this.new2_login_password)){
         this.errorpsw = true;
         return;
      }
      if(this.old_login_password=="" || this.new_login_password == "" || this.new2_login_password == ""){
        this.errorpsw = true;
        this.defaultCode1 = '密码不能为空'
        return;
      }
      if(this.new_login_password !=this.new2_login_password ){
        this.errorpsw = true;
        this.defaultCode1 = '两次输入的密码不一致'
        return;
      }
      let param = {
        member_id: this.getCookie("member_id"),
        old_login_password :this.old_login_password,
        new_login_password :this.new_login_password,
        new2_login_password :this.new2_login_password
      };
      this.$axios
        .post("/api/App/User/Set/update_login_password", qs.stringify(param), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(res => {

           if(res.data.status == 1){
             alert('修改成功')
            //  this.setCookie("token",'',-1);
            // this.setCookie("userName",'',-1);
            // this.setCookie("nm_avatar",'',-1);
            // this.setCookie("member_id",'',-1);
           } else if (res.data.status == 0){
              this.errorpsw = true;
              this.defaultCode1 = '旧密码不正确'
           } else {
              this.errorpsw = true;
              this.defaultCode1 = '请求错误'
           }
        });
    }
  },
  mounted() {
    this.pswReg = /[\u4E00-\u9FA5]/g;
     this.author =this.getCookie("identity_type") 
    // this.img =
    // this.avatar = this.getCookie("nm_avatar");
    // console.log(this.avatar);
  },
  created() {
    this.getUserlist();
  },
  components: {
    Header,
    Banner,
    Footer
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 60%;
  height: auto;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  .main-left {
    width: 230px;
    background-color: #fff;
    li {
      padding: 20px;
      list-style: none;
      border-left: 1px solid transparent;
      font-size: 18px;
      cursor: pointer;
    }
    .active {
      background-color: #f2f5fb;
      border-left: 1px solid #5079b7;
      color: #5079b7;
    }
  }
  .main-right {
    text-align: left;
    width: 900px;
    background-color: #fff;
    padding: 20px;
    margin-left: 30px;
    .nav {
      line-height: 1.8;
      border-bottom: 1px solid #5079b7;
      span {
        padding-bottom: 8px;
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
      }
      .active1 {
        border-bottom: 1px solid #5079b7;
        color: #5079b7;
      }
      .active2 {
        border-bottom: 1px solid #5079b7;
        color: #5079b7;
      }
      .active3 {
        border-bottom: 1px solid #5079b7;
        color: #5079b7;
      }
      .active4 {
        border-bottom: 1px solid #5079b7;
        color: #5079b7;
      }
      div {
        // float: right;
        color: #5079b7;
        margin-left: 210px;
      }
    }
    .content {
      .means {
        width: 400px;
        margin: 20px auto;
        p {
          label {
            display: block;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.6);
            margin-bottom: 5px;
          }
          input {
            background-color: #f2f5fb;
            border: 1px solid #f2f5fb;
            width: 400px;
            padding: 5px;
            border-radius: 3px;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.44);
            line-height: 1.8;
            outline: none;
          }
          input:disabled {
            background-color: #f0f0f0;
            cursor: not-allowed;
          }
          textarea {
            background-color: #f2f5fb;
            border: 1px solid #f2f5fb;
            width: 400px;
            padding: 5px;
            border-radius: 3px;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.44);
            line-height: 1.8;
            outline: none;
          }
        }
        div {
          width: 100%;
          height: 40px;
          font-size: 14px;
          text-align: center;
          line-height: 40px;
          background-color: #5079b7;
          color: #fff;
          cursor: pointer;
        }
        .box {
          height: 25px;
          width: 100%;
          margin: 0 auto;
          font-size: 12px;
          color: red;
          line-height: 25px;
          border: 1px solid #fc4c24;
          margin-top: 10px;
          text-align: center;
          margin-bottom: 20px;
        }
      }
      .photo {
        margin: 20px 0;
        position: relative;
        overflow: hidden;
        .box {
          width: 180px;
          height: 180px;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          background: #666;

          img {
            width: 160px;
            height: 160px;
            border-radius: 100%;
          }
        }
        .setting_right {
          margin-top: 20px;
          height: 37px;
          width: 120px;
          background-color: #5079b7;
          font-size: 14px;
          color: #fff;
          border-radius: 5px;
        }
        .hiddenInput {
          display: none;
        }
        .caption {
          font-size: 14px;
          height: 37px;
          text-align: center;
          line-height: 37px;
        }
        .sumbit {
          height: 37px;
          width: 120px;
          background-color: #5079b7;
          font-size: 14px;
          color: #fff;
          border-radius: 5px;
          text-align: center;
          line-height: 37px;
          position: absolute;
          left: 130px;
          top: 200px;
        }
      }
    }
  }
}
</style>


